<template>
	<view class="container">
		<view class="header">
			<view class="title">入党志愿书</view>
			<view class="subtitle">查看用户提交的所有入党志愿书</view>
		</view>
		
		<view class="apply-list">
			<view v-if="loading" class="loading">
				<uni-load-more status="loading" />
			</view>
			<view v-else-if="volunteerList.length === 0" class="empty">
				<text>暂无入党志愿书</text>
			</view>
			<view v-else>
				<view v-for="(item, index) in volunteerList" :key="index" class="apply-card">
					<view class="apply-header" @click="toggleExpand(index)">
						<view class="apply-info">
							<view class="apply-title">
								<text class="title-text">入党志愿书</text>
								<text :class="['status-tag', getStatusClass(item.status)]">{{ getStatusText(item.status) }}</text>
							</view>
							<view class="apply-time">提交时间：{{ item.createTime }}</view>
						</view>
						<view class="expand-icon" :class="{ 'expanded': item.isExpanded }">
							<image src="/static/center4/right.png" mode="aspectFit"></image>
						</view>
					</view>
					
					<view class="apply-detail" v-if="item.isExpanded">
						<view class="detail-item">
							<text class="label">申请编号：</text>
							<text class="value">{{ item.id }}</text>
						</view>
						<view class="detail-item">
							<text class="label">提交时间：</text>
							<text class="value">{{ item.createTime }}</text>
						</view>
						<view class="detail-item">
							<text class="label">审核时间：</text>
							<text class="value">{{ item.updateTime || '暂无' }}</text>
						</view>
						<view class="detail-item">
							<text class="label">审核意见：</text>
							<text class="value">{{ item.review || '暂无' }}</text>
						</view>
						<view class="detail-item">
							<text class="label">志愿书文件：</text>
							<view class="file-preview" @click="previewFile(item.handwrittenDoc)">
								<text class="file-name">{{ item.fileName || '查看文件' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { get } from '@/common/js/request';
import { onLoad } from '@dcloudio/uni-app'

const loading = ref(true);
const volunteerList = ref([]);
const userId = ref();

// 格式化时间
const formatTime = (timeStr) => {
	if (!timeStr) return '';
	return timeStr.replace('T', ' ');
};

// 获取入党志愿书列表
const getVolunteerList = async () => {
	try {
		loading.value = true;
		
		const res = await get('/party/volunteer/select?id=' + userId.value);
		console.log(res.data);
		volunteerList.value = res.data.partyVolunteers.map(item => ({
			...item,
			isExpanded: false,
			createTime: formatTime(item.createTime),
			reviewTime: formatTime(item.time)
		}));
	} catch (error) {
		console.error('获取入党志愿书列表失败:', error);
		uni.showToast({
			title: '获取入党志愿书列表失败',
			icon: 'none'
		});
	} finally {
		loading.value = false;
	}
};

// 切换展开状态
const toggleExpand = (index) => {
	volunteerList.value[index].isExpanded = !volunteerList.value[index].isExpanded;
};

// 获取状态样式类
const getStatusClass = (status) => {
	const statusMap = {
		0: 'status-pending',
		1: 'status-approved',
		2: 'status-rejected'
	};
	return statusMap[status] || 'status-pending';
};

// 获取状态文本
const getStatusText = (status) => {
	const statusMap = {
		0: '待审核',
		1: '已通过',
		2: '未通过'
	};
	return statusMap[status] || '待审核';
};

// 预览文件
const previewFile = (fileUrl) => {
	if (!fileUrl) {
		uni.showToast({
			title: '文件不存在',
			icon: 'none'
		});
		return;
	}
	
	// 处理多个文件URL
	const fileUrls = fileUrl.split(',');
	if (fileUrls.length === 0) {
		uni.showToast({
			title: '文件不存在',
			icon: 'none'
		});
		return;
	}
	
	// 处理第一个文件的URL
	const processedUrl = fileUrls[0].replace('//file/', '/file/');
	
	// 根据文件类型选择预览方式
	const fileType = processedUrl.split('.').pop().toLowerCase();
	console.log(fileType);
	if (['pdf', 'doc', 'docx'].includes(fileType)) {
		// 打开文件预览
		uni.downloadFile({
			url: processedUrl,
			success: (res) => {
				if (res.statusCode === 200) {
					uni.openDocument({
						filePath: res.tempFilePath,
						success: () => {
							console.log('打开文档成功');
						},
						fail: () => {
							uni.showToast({
								title: '打开文件失败',
								icon: 'none'
							});
						}
					});
				}
			},
			fail: () => {
				uni.showToast({
					title: '下载文件失败',
					icon: 'none'
				});
			}
		});
	} else {
		uni.showToast({
			title: '不支持的文件格式',
			icon: 'none'
		});
	}
};

	onLoad((option)=>{
		userId.value = option.id;
		getVolunteerList();
	});

</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f7fa;
	padding: 20rpx;
}

.header {
	padding: 30rpx 20rpx;
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #666;
	}
}

.apply-list {
	padding: 20rpx 0;
}

.apply-card {
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	
	.apply-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 2rpx solid #f5f5f5;
		
		.apply-info {
			flex: 1;
			
			.apply-title {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;
				
				.title-text {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-right: 20rpx;
				}
				
				.status-tag {
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					
					&.status-pending {
						background-color: #e6f7ff;
						color: #1890ff;
					}
					
					&.status-approved {
						background-color: #f6ffed;
						color: #52c41a;
					}
					
					&.status-rejected {
						background-color: #fff2f0;
						color: #ff4d4f;
					}
				}
			}
			
			.apply-time {
				font-size: 26rpx;
				color: #999;
			}
		}
		
		.expand-icon {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: transform 0.3s ease;
			
			&.expanded {
				transform: rotate(90deg);
			}
			
			image {
				width: 32rpx;
				height: 32rpx;
				opacity: 0.5;
			}
		}
	}
	
	.apply-detail {
		padding: 30rpx;
		background-color: #fafafa;
		
		.detail-item {
			display: flex;
			margin-bottom: 20rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.label {
				font-size: 28rpx;
				color: #666;
				width: 160rpx;
				flex-shrink: 0;
			}
			
			.value {
				font-size: 28rpx;
				color: #333;
				flex: 1;
			}
			
			.file-preview {
				display: flex;
				align-items: center;
				background-color: #fff;
				padding: 16rpx 24rpx;
				border-radius: 8rpx;
				border: 2rpx solid #f0f0f0;
				
				.file-name {
					font-size: 28rpx;
					color: #1890ff;
				}
			}
		}
	}
}

.loading {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20rpx;
}

.empty {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20rpx;
	color: #999;
	font-size: 28rpx;
}
</style> 